<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>星座罗盘 | 黄道十二宫</title>
    <style>
        /* 基础样式重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            /* 禁用移动端点击蒙层效果 */
            -webkit-tap-highlight-color: transparent;
            tap-highlight-color: transparent;
            outline: none;
        }

        /* 为可点击元素添加特定样式 */
        button,
        [class$="-btn"],
        .zodiac-sign,
        .compass-center,
        a,
        [role="button"] {
            /* 禁用移动端点击蒙层效果 */
            -webkit-tap-highlight-color: transparent;
            tap-highlight-color: transparent;
            /* 防止文本选择 */
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            outline: none;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: #0a0e17;
            color: #ffffff;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 0;
            overflow-x: hidden;
            overflow-y: auto; /* 允许垂直滚动 */
        }
        
        /* 在iframe中显示时特殊处理 */
        body.in-iframe {
            padding: 20px;
        }

        /* 隐藏所有元素的滚动条但允许滚动 */
        html {
            scrollbar-width: none; /* Firefox */
            -ms-overflow-style: none; /* IE and Edge */
        }

        body {
            scrollbar-width: none; /* Firefox */
            -ms-overflow-style: none; /* IE and Edge */
        }

        /* Chrome, Safari and Opera */
        html::-webkit-scrollbar,
        body::-webkit-scrollbar {
            display: none;
        }

        /* 确保所有可滚动元素也隐藏滚动条 */
        * {
            scrollbar-width: none; /* Firefox */
        }

        *::-webkit-scrollbar {
            display: none; /* Chrome, Safari, Edge */
        }

        /* 页面标题 */
        header {
            text-align: center;
            margin-bottom: 30px;
            z-index: 10;
        }

        h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
            background: linear-gradient(90deg, #ff6b6b, #feca57, #48dbfb, #1dd1a1, #c8d6e5);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            background-size: 300% 300%;
            animation: gradient 15s ease infinite;
        }

        @keyframes gradient {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        .subtitle {
            color: #b2bec3;
            font-size: 1.1rem;
            max-width: 600px;
        }

        /* 罗盘容器 */
        .compass-container {
            position: relative;
            width: 90vw;
            max-width: 800px;
            height: 90vw;
            max-height: 800px;
            margin: 20px auto;
        }

        /* 当在iframe中加载时增加宽度限制 */
        body.in-iframe .compass-container {
            max-width: 1100px;
            max-height: 1100px;
        }

        /* 罗盘底座 */
        .compass-base {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: radial-gradient(circle, #1a237e 0%, #0d1117 100%);
            box-shadow: 0 0 50px rgba(33, 150, 243, 0.3);
            overflow: hidden;
        }

        /* 星座环 */
        .zodiac-ring {
            position: absolute;
            width: 90%;
            height: 90%;
            top: 5%;
            left: 5%;
            border-radius: 50%;
            transition: transform 5s cubic-bezier(0.17, 0.67, 0.13, 0.99);
        }

        /* 星座扇区 */
        .zodiac-sector {
            position: absolute;
            width: 50%;
            height: 50%;
            top: 0;
            left: 50%;
            transform-origin: bottom left;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .zodiac-sector-inner {
            position: relative;
            width: 100%;
            height: 100%;
            padding: 15% 10% 10% 10%;
        }

        .zodiac-sign {
            position: absolute;
            transform-origin: center;
            text-align: center;
            width: 60px;
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .zodiac-sign:hover {
            transform: scale(1.1);
        }

        .zodiac-icon {
            font-size: 1.0rem;
            margin-bottom: -10px;
            text-shadow: 0 0 8px rgba(255, 255, 255, 0.7);
            transform: translateY(40px);
        }

        .zodiac-name {
            font-size: 0.8rem;
            text-transform: uppercase;
            font-weight: bold;
            transform: rotate(90deg) translateY(60px);
            width: 100px;
            position: absolute;
            left: 70%;
            top: 90%;
        }


        /* 罗盘中心 */
        .compass-center {
            position: absolute;
            width: 20%;
            height: 20%;
            top: 40%;
            left: 40%;
            border-radius: 50%;
            background: radial-gradient(circle, #ffd600 0%, #ff8f00 100%);
            box-shadow: 0 0 20px rgba(255, 193, 7, 0.8);
            z-index: 5;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .compass-center:hover {
            transform: scale(1.05);
            box-shadow: 0 0 25px rgba(255, 193, 7, 0.9);
        }

        .compass-center::after {
            content: '★';
            font-size: 2rem;
            color: white;
            text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
        }

        /* 方向标记 */
        .direction {
            position: absolute;
            z-index: 4;
            font-weight: bold;
            text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
        }

        .north {
            top: 2%;
            left: 50%;
            transform: translateX(-50%);
            color: #ff5252;
        }

        .east {
            top: 50%;
            right: 2%;
            transform: translateY(-50%);
            color: #4caf50;
        }

        .south {
            bottom: 2%;
            left: 50%;
            transform: translateX(-50%);
            color: #2196f3;
        }

        .west {
            top: 50%;
            left: 2%;
            transform: translateY(-50%);
            color: #9c27b0;
        }

        /* 星座信息面板 */
        .zodiac-info {
            background: rgba(17, 24, 39, 0.8);
            backdrop-filter: blur(10px);
            border-radius: 12px;
            padding: 20px;
            margin-top: 30px;
            width: 95%;
            max-width: 1200px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .info-header {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            padding-bottom: 10px;
        }

        .info-icon {
            font-size: 2rem;
            margin-right: 15px;
        }

        .info-title {
            flex-grow: 1;
        }

        .info-name {
            font-size: 1.5rem;
            margin-bottom: 5px;
        }

        .info-date {
            color: #b2bec3;
            font-size: 0.9rem;
        }

        .info-content {
            font-size: 1rem;
            line-height: 1.6;
            color: #e9ecef;
        }

        /* 控制按钮区域 */
        .controls-container {
            width: 90%;
            max-width: 600px;
            margin-top: 20px;
        }

        .controls {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            margin: 20px 0;
        }

        .controls-row {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px;
        }

        .control-btn {
            background: rgba(30, 41, 59, 0.8);
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: white;
            padding: 10px 14px; /* 增大内边距使按钮更大 */
            border-radius: 22px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 1.0rem; /* 增大字体大小 */
            min-width: 80px; /* 确保按钮有最小宽度 */
        }

        .control-btn:hover {
            background: rgba(59, 130, 246, 0.5);
            transform: translateY(-2px);
        }

        /* 添加按钮点击时的选中效果 */
        .control-btn:active {
            transform: scale(0.95);
            background: rgba(59, 130, 246, 0.8);
        }

        .control-btn:focus {
            outline: 2px solid rgba(59, 130, 246, 0.8);
            outline-offset: 2px;
        }

        /* 添加选中状态样式 */
        .control-btn.selected {
            background: rgba(59, 130, 246, 0.8);
            border-color: rgba(255, 255, 255, 0.5);
            box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
        }

        .control-btn.reset {
            background: rgba(239, 68, 68, 0.3);
        }

        .control-btn.reset:active {
            background: rgba(239, 68, 68, 0.6);
        }

        .control-btn.reset.selected {
            background: rgba(239, 68, 68, 0.6);
            box-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
        }

        .control-btn.spin {
            background: rgba(34, 197, 94, 0.3);
        }

        .control-btn.spin:active {
            background: rgba(34, 197, 94, 0.6);
        }

        .control-btn.spin.selected {
            background: rgba(34, 197, 94, 0.6);
            box-shadow: 0 0 10px rgba(34, 197, 94, 0.5);
        }

        /* 星星背景 */
        .stars {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
        }

        .star {
            position: absolute;
            background-color: white;
            border-radius: 50%;
            animation: twinkle 2s infinite alternate;
        }

        @keyframes twinkle {
            from { opacity: 0.3; }
            to { opacity: 1; }
        }

        /* 响应式调整 */
        @media (max-width: 768px) {
            h1 {
                font-size: 2rem;
            }

            .subtitle {
                font-size: 1rem;
            }

            .zodiac-name {
                font-size: 0.7rem;
                width: 80px;
            }

            .zodiac-info {
                padding: 15px;
            }

            .info-name {
                font-size: 1.3rem;
            }

            .info-content {
                font-size: 0.9rem;
            }

            .control-btn {
                padding: 8px 14px; /* 小屏幕上也增大按钮尺寸 */
                font-size: 1rem;
                min-width: 70px;
            }
        }

        @media (max-width: 480px) {
            .controls {
                gap: 8px;
            }

            .controls-row {
                gap: 8px;
            }
        }
    </style>
</head>
<body>
<!-- 星星背景 (将通过JS动态生成) -->
<div class="stars"></div>

<header>
    <h1>星座罗盘</h1>
    <p class="subtitle">探索黄道十二宫的奥秘，了解每个星座的独特特质与能量</p>
</header>

<div class="compass-container">
    <!-- 罗盘底座 -->
    <div class="compass-base"></div>

    <!-- 星座环 -->
    <div class="zodiac-ring" id="zodiacRing">
        <!-- 星座扇区将通过JS动态生成 -->
    </div>

    <!-- 方向标记 -->
    <div class="direction north">北</div>
    <div class="direction east">东</div>
    <div class="direction south">南</div>
    <div class="direction west">西</div>

    <!-- 罗盘中心 -->
    <div class="compass-center" id="spinButton"></div>
</div>

<!-- 控制按钮 -->
<div class="controls-container">
    <div class="controls">
        <!-- 第一行：重置和随机旋转按钮 -->
        <div class="controls-row">
            <button class="control-btn reset" id="resetBtn">重置</button>
            <button class="control-btn spin" id="randomSpinBtn">随机旋转</button>
        </div>
        <!-- 第二行：星座按钮 -->
        <div class="controls-row">
            <button class="control-btn" id="ariesBtn">白羊座</button>
            <button class="control-btn" id="taurusBtn">金牛座</button>
            <button class="control-btn" id="geminiBtn">双子座</button>
            <button class="control-btn" id="cancerBtn">巨蟹座</button>
            <button class="control-btn" id="leoBtn">狮子座</button>
            <button class="control-btn" id="virgoBtn">处女座</button>
            <button class="control-btn" id="libraBtn">天秤座</button>
            <button class="control-btn" id="scorpioBtn">天蝎座</button>
            <button class="control-btn" id="sagittariusBtn">射手座</button>
            <button class="control-btn" id="capricornBtn">摩羯座</button>
            <button class="control-btn" id="aquariusBtn">水瓶座</button>
            <button class="control-btn" id="piscesBtn">双鱼座</button>
        </div>
    </div>
</div>

<!-- 星座信息面板 -->
<div class="zodiac-info" id="zodiacInfo">
    <div class="info-header">
        <div class="info-icon" id="infoIcon">♈</div>
        <div class="info-title">
            <div class="info-name" id="infoName">白羊座</div>
            <div class="info-date" id="infoDate">3月21日 - 4月19日</div>
        </div>
    </div>
    <div class="info-content" id="infoContent">
        白羊座是黄道十二宫的第一个星座，象征着新生与开始。白羊座的人通常充满活力、勇气和热情，他们具有强烈的领导能力和冒险精神，喜欢接受挑战并迅速采取行动。他们坦率直接，对生活充满热情，但有时可能显得冲动或缺乏耐心。
    </div>
</div>

<script>
    // 星座数据 - 包含全部12个星座
    const zodiacSigns = [
        {
            name: "白羊座",
            symbol: "♈",
            dates: "3月21日 - 4月19日",
            color: "#ff6b6b",
            degrees: 0,
            description: "白羊座是黄道十二宫的第一个星座，象征着新生与开始。白羊座的人通常充满活力、勇气和热情，他们具有强烈的领导能力和冒险精神，喜欢接受挑战并迅速采取行动。他们坦率直接，对生活充满热情，但有时可能显得冲动或缺乏耐心。"
        },
        {
            name: "金牛座",
            symbol: "♉",
            dates: "4月20日 - 5月20日",
            color: "#feca57",
            degrees: 30,
            description: "金牛座是黄道十二宫的第二个星座，代表稳定与实际。金牛座的人通常踏实可靠、耐心持久，对生活有务实的态度。他们欣赏美好事物，重视安全感和物质舒适，但有时可能显得固执或过于保守。"
        },
        {
            name: "双子座",
            symbol: "♊",
            dates: "5月21日 - 6月21日",
            color: "#48dbfb",
            degrees: 60,
            description: "双子座是黄道十二宫的第三个星座，象征沟通与变化。双子座的人通常聪明机智、善于言辞，对新事物充满好奇心。他们适应能力强，多才多艺，但有时可能显得善变或注意力不集中。"
        },
        {
            name: "巨蟹座",
            symbol: "♋",
            dates: "6月22日 - 7月22日",
            color: "#1dd1a1",
            degrees: 90,
            description: "巨蟹座是黄道十二宫的第四个星座，代表情感与家庭。巨蟹座的人通常情感丰富、富有同情心，非常重视家庭和安全感。他们直觉敏锐，保护欲强，但有时可能显得敏感或过于情绪化。"
        },
        {
            name: "狮子座",
            symbol: "♌",
            dates: "7月23日 - 8月22日",
            color: "#ff9f43",
            degrees: 120,
            description: "狮子座是黄道十二宫的第五个星座，象征创造力与自信。狮子座的人通常热情大方、自信乐观，具有天生的领导才能。他们喜欢被关注和赞美，慷慨大方，但有时可能显得自负或好面子。"
        },
        {
            name: "处女座",
            symbol: "♍",
            dates: "8月23日 - 9月22日",
            color: "#c8d6e5",
            degrees: 150,
            description: "处女座是黄道十二宫的第六个星座，代表分析与完美。处女座的人通常细致周到、勤奋踏实，具有强烈的责任感和分析能力。他们注重细节，追求完美，但有时可能显得挑剔或过度担忧。"
        },
        {
            name: "天秤座",
            symbol: "♎",
            dates: "9月23日 - 10月23日",
            color: "#78e08f",
            degrees: 180,
            description: "天秤座是黄道十二宫的第七个星座，象征平衡与和谐。天秤座的人通常公正客观、善于交际，追求和谐与公平。他们有良好的审美能力，善于协调，但有时可能显得犹豫不决或过于妥协。"
        },
        {
            name: "天蝎座",
            symbol: "♏",
            dates: "10月24日 - 11月22日",
            color: "#ff6b81",
            degrees: 210,
            description: "天蝎座是黄道十二宫的第八个星座，代表深度与转变。天蝎座的人通常充满激情、意志坚定，具有敏锐的洞察力。他们情感深沉，忠诚专一，但有时可能显得神秘或固执。"
        },
        {
            name: "射手座",
            symbol: "♐",
            dates: "11月23日 - 12月21日",
            color: "#f8a5c2",
            degrees: 240,
            description: "射手座是黄道十二宫的第九个星座，象征探索与自由。射手座的人通常乐观开朗、热爱冒险，对知识和真理有强烈的追求。他们热情大方，喜欢自由，但有时可能显得鲁莽或不够专注。"
        },
        {
            name: "摩羯座",
            symbol: "♑",
            dates: "12月22日 - 1月19日",
            color: "#54a0ff",
            degrees: 270,
            description: "摩羯座是黄道十二宫的第十个星座，代表成就与责任。摩羯座的人通常踏实稳重、有远大抱负，具有强烈的责任感和毅力。他们目标明确，勤奋努力，但有时可能显得严肃或过于实际。"
        },
        {
            name: "水瓶座",
            symbol: "♒",
            dates: "1月20日 - 2月18日",
            color: "#00d2d3",
            degrees: 300,
            description: "水瓶座是黄道十二宫的第十一个星座，象征创新与独特。水瓶座的人通常独立思考、富有创意，对新思想和新观念持开放态度。他们重视自由和平等，善于社交，但有时可能显得古怪或情感疏离。"
        },
        {
            name: "双鱼座",
            symbol: "♓",
            dates: "2月19日 - 3月20日",
            color: "#8e44ad",
            degrees: 330,
            description: "双鱼座是黄道十二宫的第十二个星座，代表灵感与直觉。双鱼座的人通常富有想象力、同情心强，具有敏锐的直觉和艺术天赋。他们善解人意，乐于助人，但有时可能显得不切实际或过于敏感。"
        }
    ];

    // 生成星座扇区
    const zodiacRing = document.getElementById('zodiacRing');

    zodiacSigns.forEach(sign => {
        const sector = document.createElement('div');
        sector.className = 'zodiac-sector';
        sector.style.transform = `rotate(${sign.degrees}deg)`;
        sector.style.backgroundColor = `${sign.color}20`; // 带透明度的背景色

        const inner = document.createElement('div');
        inner.className = 'zodiac-sector-inner';

        const signElement = document.createElement('div');
        signElement.className = 'zodiac-sign';
        // signElement.style.transform = `translate(50%, 20%)`;
        signElement.setAttribute('data-sign', sign.name);

        const icon = document.createElement('div');
        icon.className = 'zodiac-icon';
        icon.style.color = sign.color;
        icon.textContent = sign.symbol;

        const name = document.createElement('div');
        name.className = 'zodiac-name';
        name.style.color = sign.color;
        name.textContent = sign.name;

        signElement.appendChild(icon);
        signElement.appendChild(name);
        inner.appendChild(signElement);
        sector.appendChild(inner);
        zodiacRing.appendChild(sector);

        // 添加点击事件
        signElement.addEventListener('click', () => {
            updateInfoPanel(sign);
            rotateToSign(sign);
        });
    });

    // 更新信息面板
    function updateInfoPanel(sign) {
        document.getElementById('infoIcon').textContent = sign.symbol;
        document.getElementById('infoIcon').style.color = sign.color;
        document.getElementById('infoName').textContent = sign.name;
        document.getElementById('infoName').style.color = sign.color;
        document.getElementById('infoDate').textContent = sign.dates;
        document.getElementById('infoContent').textContent = sign.description;
    }

    // 旋转到指定星座
    function rotateToSign(sign) {
        const targetRotation = -sign.degrees;
        zodiacRing.style.transform = `rotate(${targetRotation}deg)`;
    }

    // 随机旋转罗盘
    function spinRandomly() {
        const randomRotation = Math.floor(Math.random() * 360) + 1080; // 至少3圈
        zodiacRing.style.transform = `rotate(${randomRotation}deg)`;

        // 找到最终停留的星座并更新信息面板
        setTimeout(() => {
            const finalRotation = randomRotation % 360;
            const closestSign = zodiacSigns.reduce((closest, sign) => {
                const currentDiff = Math.abs((finalRotation % 360) - sign.degrees);
                const closestDiff = Math.abs((finalRotation % 360) - closest.degrees);
                return currentDiff < closestDiff ? sign : closest;
            }, zodiacSigns[0]);

            updateInfoPanel(closestSign);
        }, 4500); // 等待旋转动画接近结束
    }

    // 为中心按钮添加随机旋转功能
    document.getElementById('spinButton').addEventListener('click', spinRandomly);
    document.getElementById('randomSpinBtn').addEventListener('click', spinRandomly);

    // 重置按钮
    document.getElementById('resetBtn').addEventListener('click', () => {
        zodiacRing.style.transform = 'rotate(0deg)';
        updateInfoPanel(zodiacSigns[0]); // 重置为白羊座
    });

    // 移除所有控制按钮的选中状态
    function removeAllSelectedStates() {
        const buttons = document.querySelectorAll('.control-btn');
        buttons.forEach(btn => {
            btn.classList.remove('selected');
        });
    }

    // 为所有星座添加快捷按钮事件
    document.getElementById('ariesBtn').addEventListener('click', () => {
        removeAllSelectedStates();
        event.currentTarget.classList.add('selected');
        const sign = zodiacSigns.find(s => s.name === '白羊座');
        if (sign) { rotateToSign(sign); updateInfoPanel(sign); }
    });

    document.getElementById('taurusBtn').addEventListener('click', () => {
        removeAllSelectedStates();
        event.currentTarget.classList.add('selected');
        const sign = zodiacSigns.find(s => s.name === '金牛座');
        if (sign) { rotateToSign(sign); updateInfoPanel(sign); }
    });

    document.getElementById('geminiBtn').addEventListener('click', () => {
        removeAllSelectedStates();
        event.currentTarget.classList.add('selected');
        const sign = zodiacSigns.find(s => s.name === '双子座');
        if (sign) { rotateToSign(sign); updateInfoPanel(sign); }
    });

    document.getElementById('cancerBtn').addEventListener('click', () => {
        removeAllSelectedStates();
        event.currentTarget.classList.add('selected');
        const sign = zodiacSigns.find(s => s.name === '巨蟹座');
        if (sign) { rotateToSign(sign); updateInfoPanel(sign); }
    });

    document.getElementById('leoBtn').addEventListener('click', () => {
        removeAllSelectedStates();
        event.currentTarget.classList.add('selected');
        const sign = zodiacSigns.find(s => s.name === '狮子座');
        if (sign) { rotateToSign(sign); updateInfoPanel(sign); }
    });

    document.getElementById('virgoBtn').addEventListener('click', () => {
        removeAllSelectedStates();
        event.currentTarget.classList.add('selected');
        const sign = zodiacSigns.find(s => s.name === '处女座');
        if (sign) { rotateToSign(sign); updateInfoPanel(sign); }
    });

    document.getElementById('libraBtn').addEventListener('click', () => {
        removeAllSelectedStates();
        event.currentTarget.classList.add('selected');
        const sign = zodiacSigns.find(s => s.name === '天秤座');
        if (sign) { rotateToSign(sign); updateInfoPanel(sign); }
    });

    document.getElementById('scorpioBtn').addEventListener('click', () => {
        removeAllSelectedStates();
        event.currentTarget.classList.add('selected');
        const sign = zodiacSigns.find(s => s.name === '天蝎座');
        if (sign) { rotateToSign(sign); updateInfoPanel(sign); }
    });

    document.getElementById('sagittariusBtn').addEventListener('click', () => {
        removeAllSelectedStates();
        event.currentTarget.classList.add('selected');
        const sign = zodiacSigns.find(s => s.name === '射手座');
        if (sign) { rotateToSign(sign); updateInfoPanel(sign); }
    });

    document.getElementById('capricornBtn').addEventListener('click', () => {
        removeAllSelectedStates();
        event.currentTarget.classList.add('selected');
        const sign = zodiacSigns.find(s => s.name === '摩羯座');
        if (sign) { rotateToSign(sign); updateInfoPanel(sign); }
    });

    document.getElementById('aquariusBtn').addEventListener('click', () => {
        removeAllSelectedStates();
        event.currentTarget.classList.add('selected');
        const sign = zodiacSigns.find(s => s.name === '水瓶座');
        if (sign) { rotateToSign(sign); updateInfoPanel(sign); }
    });

    document.getElementById('piscesBtn').addEventListener('click', () => {
        removeAllSelectedStates();
        event.currentTarget.classList.add('selected');
        const sign = zodiacSigns.find(s => s.name === '双鱼座');
        if (sign) { rotateToSign(sign); updateInfoPanel(sign); }
    });

    // 为重置和随机旋转按钮添加选中效果
    document.getElementById('resetBtn').addEventListener('click', () => {
        removeAllSelectedStates();
        event.currentTarget.classList.add('selected');
        zodiacRing.style.transform = 'rotate(0deg)';
        updateInfoPanel(zodiacSigns[0]); // 重置为白羊座
    });

    document.getElementById('randomSpinBtn').addEventListener('click', () => {
        removeAllSelectedStates();
        event.currentTarget.classList.add('selected');
        spinRandomly();
    });

    // 生成星星背景
    function createStars() {
        const starsContainer = document.querySelector('.stars');
        const starCount = 150;

        for (let i = 0; i < starCount; i++) {
            const star = document.createElement('div');
            star.className = 'star';

            // 随机位置
            const x = Math.random() * 100;
            const y = Math.random() * 100;

            // 随机大小
            const size = Math.random() * 2 + 1;

            // 随机闪烁延迟
            const delay = Math.random() * 3;

            star.style.left = `${x}%`;
            star.style.top = `${y}%`;
            star.style.width = `${size}px`;
            star.style.height = `${size}px`;
            star.style.animationDelay = `${delay}s`;

            starsContainer.appendChild(star);
        }
    }

    // 优化滑动体验的函数
    function optimizeScrolling() {
        // 1. 通过CSS设置触摸行为，允许垂直滑动
        document.body.style.touchAction = 'pan-y';
        document.body.style.overscrollBehavior = 'contain';
        
        // 1.1 确保星星背景不会覆盖内容
        const starsBackground = document.querySelector('.stars');
        if (starsBackground) {
            starsBackground.style.zIndex = '-1';
        }

        // 2. 定义变量用于触摸控制
        let startX = null;
        let startY = null;
        let isVerticalScrolling = false;
        const HORIZONTAL_THRESHOLD = 10; // 放宽水平滑动检测阈值
        const VERTICAL_MIN_DISTANCE = 5; // 垂直滑动最小距离

        // 触摸开始事件
        document.addEventListener('touchstart', (e) => {
            startX = e.touches[0].clientX;
            startY = e.touches[0].clientY;
            isVerticalScrolling = false;
        }, { passive: true });

        // 触摸移动事件 - 优化版，优先保证垂直滑动体验
        document.addEventListener('touchmove', (e) => {
            if (!startX || !startY) return;

            // 计算滑动距离
            const touchX = e.touches[0].clientX;
            const touchY = e.touches[0].clientY;
            const diffX = Math.abs(touchX - startX);
            const diffY = Math.abs(touchY - startY);

            // 确定是否为垂直滚动
            if (!isVerticalScrolling && diffY > VERTICAL_MIN_DISTANCE) {
                isVerticalScrolling = true;
            }

            // 只有当明显是水平滑动时才阻止
            if (!isVerticalScrolling && diffX > HORIZONTAL_THRESHOLD && diffX > diffY) {
                e.preventDefault();
            }
            // 如果已经确定为垂直滚动，则允许继续滚动
            // 这里不使用passive: false可以提高性能
        }, { passive: true });

        // 3. 手势处理 - 只在必要时阻止
        document.addEventListener('gesturestart', (e) => {
            e.preventDefault();
        }, { passive: false });

        // 4. 优化水平位置控制 - 减少过度干预
        let lastScrollTime = 0;
        const SCROLL_DELAY = 50; // 滚动事件防抖延迟

        window.addEventListener('scroll', () => {
            const now = Date.now();
            // 防抖处理，避免过于频繁地干预滚动
            if (now - lastScrollTime > SCROLL_DELAY && window.scrollX !== 0) {
                lastScrollTime = now;
                window.scrollTo(0, window.scrollY);
            }
        }, { passive: true });

        // 5. 确保body可以自由扩展高度
        document.body.style.minHeight = '100vh';
        document.documentElement.style.minHeight = '100vh';
        
        // 6. 确保内容可以垂直滚动
        document.body.style.overflowY = 'auto';
        document.documentElement.style.overflowY = 'auto';

        // 7. 为信息面板添加额外的滚动保障
        const infoContent = document.querySelector('.info-content');
        if (infoContent) {
            infoContent.style.zIndex = '10';
            infoContent.style.position = 'relative';
            infoContent.style.overflowY = 'auto';
            // 确保信息面板在移动设备上有足够的空间显示
            if (window.innerWidth <= 768) {
                infoContent.style.marginBottom = '50px';
            }
        }
        
        // 8. 在移动设备上添加额外的底部空间，确保内容不被遮挡
        const addMobileBottomSpace = () => {
            if (window.innerWidth <= 768) {
                document.body.style.paddingBottom = '100px'; // 增加底部padding，确保内容不被遮挡
            } else {
                document.body.style.paddingBottom = '0';
            }
        };
        
        // 初始调用一次
        addMobileBottomSpace();
        
        // 监听窗口大小变化
        window.addEventListener('resize', addMobileBottomSpace);
    }

    // 页面加载完成后初始化
    window.addEventListener('load', () => {
        createStars();
        
        // 如果是在iframe中加载，添加in-iframe类并优化滚动
        if (window.self !== window.top) {
            document.body.classList.add('in-iframe');
            // 确保iframe中能正常滚动
            document.body.style.height = 'auto';
            document.documentElement.style.height = 'auto';
            document.body.style.overflowY = 'auto';
            document.documentElement.style.overflowY = 'auto';
        }
        
        // 添加延迟确保DOM完全加载后再设置默认信息
        setTimeout(() => {
            updateInfoPanel(zodiacSigns[0]); // 默认显示白羊座信息
        }, 300);
        optimizeScrolling(); // 优化滑动体验
    });
</script>
</body>
</html>
